<template>
  <div class="hello">
    <h1>欢迎来到洗浴中心</h1>
    <p>请选择一位美女为你服务</p>
    <div v-for="(item, index) in list" :key="index">
      <button @click="selectGirl(index)">{{ index }}：{{ item }}</button>
    </div>
    <p>你选择了【{{ alist }}】为你服务</p>

    <button @click="btnOver">{{ overActive }}</button>
    <p>{{ time }}</p>
    <button @click="startTime">显示时间123123123</button>
    <button @click="startTime">234</button>
    <button @click="startTime">2222</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onRenderTracked,
  onRenderTriggered,
  watch,
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onActivated,
  onDeactivated,
} from "vue";
import { startTime, time } from "@/hooks/timeHook";
export default defineComponent({
  name: "HelloWorld",
  setup() {
    console.log("1 - 开始创建组件生命周期");
    // onBeforeMount(()=>{
    //   console.log('2-组件创建之前')
    // })
    // onMounted(()=>{
    //   console.log('3-组件创建完成后')
    // })
    // onBeforeUpdate(()=>{
    //   console.log('4-组件更新之前')
    // })
    // onUpdated(()=>{
    //   console.log('5-组件更新之后')
    // })
    // onBeforeUnmount(()=>{ //vue2 不一样
    //   console.log('6-组件卸载之前')
    // })
    //  onBeforeUnmount(()=>{
    //   console.log('7-组件卸载之后')
    // })
    // onErrorCaptured(()=>{
    //   console.log('子组件异常钩子函数');
    // })
    // onActivated(()=>{
    //   console.log('<keep-alive></keep-alive>里面才有的两个生命周期函数')
    // })
    // onDeactivated(()=>{
    //   console.log('<keep-alive></keep-alive>里面才有的两个生命周期函数')

    // })

    interface Data {
      list: string[];
      alist: string;
      selectGirl: (index: number) => void;
    }
    const data: Data = reactive({
      list: ["小红", "大脚", "兰兰"],
      alist: "",
      selectGirl: (index) => {
        data.alist = data.list[index];
      },
    });
    // onRenderTracked((event)=>{
    //   console.log('状态跟踪钩子--跟踪所有的值')
    //   console.log(event,'-------')
    // })
    // onRenderTriggered((event)=>{
    //   console.log('状态跟踪钩子-只跟踪一个值')
    //   console.log(event,'11111111')
    // })
    console.log(data, "proxy");
    const refData = toRefs(data); //toRefs把data proxy代理对象转成对象 所有最后可以解构return出去 toRefs会递归一直查到对象的原型练顶端
    console.log(refData, "对象");
    {
      /*@ts-ignore*/
    }
    const overActive = ref("点餐完毕");
    const btnOver = () => {
      overActive.value = overActive.value + "|" + "红浪漫";
      // document.title = overActive.value
    };
    watch([overActive, () => data.alist], (newValue, oldValue) => {
      console.log(newValue.join(","), "---新值");
      console.log(oldValue.join(","), "---老值");
      document.title = newValue[0];
    });

    return {
      ...refData,
      overActive,
      btnOver,
      time,
      startTime,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
